<!-- 电梯概述统计 -->
<template>
	<div class="LiftBox spcLift">
		<div class="currentDay">
			<span>{{year}}</span>年<span>{{month}}</span>月<span>{{day}}</span>日
		</div>
		<div class="top">
			<div class="tixing">
				梯联网智慧平台
			</div>
		</div>
		<div class="bottom">
			<div class="leftBox">
				<div class="box-item">
					<div class="boxTit">
						物联网
					</div>
					<div class="boxContent">
						<div class="itemMess">
							<span class="color00F0FF">150000</span>
							<el-tooltip class="item" effect="dark" content="总电梯数" placement="top">
								<span>总电梯数</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="color00F0FF">155181</span>
							<el-tooltip class="item" effect="dark" content="安装物联网电梯数" placement="top">
								<span>安装物联网电梯数</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="colorFF002A">528</span>
							<el-tooltip class="item" effect="dark" content="故障电梯数" placement="top">
								<span>故障电梯数</span>
							</el-tooltip>
						</div>
					</div>
				</div>
				<div class="box-item">
					<div class="boxTit">
						维保
					</div>
					<div class="boxContent">
						<div class="itemMess">
							<span class="color00F0FF">5</span>
							<el-tooltip class="item" effect="dark" content="当天维保" placement="top">
								<span>当天维保</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="color00F0FF">5</span>
							<el-tooltip class="item" effect="dark" content="已完成维保" placement="top">
								<span>已完成维保</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="colorFF002A">0</span>
							<el-tooltip class="item" effect="dark" content="非正常" placement="top">
								<span>非正常</span>
							</el-tooltip>
						</div>
					</div>
				</div>
				<div class="box-item speItem">
					<div class="boxTit">
						救援
					</div>
					<div class="boxContent" style="height: 30%;">
						<div class="itemMess">
							<span class="color00F0FF">5</span>
							<el-tooltip class="item" effect="dark" content="当天救援" placement="top">
								<span>当天救援</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="color00F0FF">5</span>
							<el-tooltip class="item" effect="dark" content="已完成救援" placement="top">
								<span>已完成救援</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="colorFF002A">0</span>
							<el-tooltip class="item" effect="dark" content="非正常" placement="top">
								<span>非正常</span>
							</el-tooltip>
						</div>
					</div>
					<div class="line"></div>
					<div class="boxTit">
						维修
					</div>
					<div class="boxContent" style="height: 30%;">
						<div class="itemMess">
							<span class="color00F0FF">5</span>
							<el-tooltip class="item" effect="dark" content="当天维修" placement="top">
								<span>当天维修</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="color00F0FF">5</span>
							<el-tooltip class="item" effect="dark" content="已完成维修" placement="top">
								<span>已完成维修</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="colorFF002A">0</span>
							<el-tooltip class="item" effect="dark" content="非正常" placement="top">
								<span>非正常</span>
							</el-tooltip>
						</div>
					</div>
				</div>
				<div class="box-item" style="margin-bottom: 0;">
					<div class="boxTit">
						96333应急救援
					</div>
					<div class="boxContent">
						<div class="itemMess">
							<span class="colorFF002A">3</span>
							<el-tooltip class="item" effect="dark" content="总救援数" placement="top">
								<span>总救援数</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="colorFF002A">2</span>
							<el-tooltip class="item" effect="dark" content="已完成救援" placement="top">
								<span>已完成救援</span>
							</el-tooltip>
						</div>
						<div class="itemMess">
							<span class="colorFF002A">1</span>
							<el-tooltip class="item" effect="dark" content="待完成救援" placement="top">
								<span>待完成救援</span>
							</el-tooltip>
						</div>
					</div>
				</div>
			</div>
			<div class="centerBox">
				<div class="header">无锡智慧市民中心</div>
				<div class="amap-wrapper">
					<el-amap class="amap-box" :plugin="plugin" :vid="'amap-vue'" :center="center" :zoom='15'></el-amap>
				</div>
			</div>
			<div class="rightBox">
				<div class='rightItem'>
					<el-input type="text" v-model="query" class='input'></el-input>
					<img src="../../../assets/EleSta/search.png" alt="" class="searchImg">
				</div>
				<div class="rightBoxItem">
					<div class="boxTit">
						视频监控
					</div>
					<div class="imgBox">
						<img src="../../../assets/EleSta/jian1.png" alt="">
						<img src="../../../assets/EleSta/jian2.png" alt="">
						<img src="../../../assets/EleSta/jian3.png" alt="">
						<img src="../../../assets/EleSta/jian4.png" alt="">
					</div>
				</div>
				<div class="rightBoxItem overflow" style="margin-bottom: 0;">
					<div class="boxTit">
						提醒
					</div>
					<div class="lastItem">
						<div class="colorFF002A">
							· 2019-6-12 14:32:54
						</div>
						<el-tooltip class="item" effect="dark" content="9号楼3#电梯发起应急救援" placement="top">
							<div class="colorFF">
								9号楼3#电梯发起应急救援
							</div>
						</el-tooltip>
					</div>
					<div class="lastItem">
						<div class="colorFF002A">
							· 2019-6-12 14:32:54
						</div>
						<el-tooltip class="item" effect="dark" content="9号楼3#电梯发起应急救援" placement="top">
							<div class="colorFF">
								9号楼3#电梯发起应急救援
							</div>
						</el-tooltip>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: '',
				center: [120.31249261111451, 31.491799014963632],
				plugin: [{
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 100, //超过10秒后停止定位，默认：无穷大
					maximumAge: 0, //定位结果缓存0毫秒，默认：0
					convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
					showButton: true, //显示定位按钮，默认：true
					buttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角
					showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
					showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
					panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
					zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
					extensions: 'all',
					pName: 'Geolocation',
					zoom: 14, //初始化地图层级
				}],
				loaded: true,
				year:new Date().getFullYear(),
				month:new Date().getMonth()+1 < 10 ? '0' + (new Date().getMonth()+1) : new Date().getMonth()+1,
				day:new Date().getDate() < 10 ? '0'+ new Date().getDate() : new Date().getDate(),
			}
		}
	}
</script>

<style lang="less" scoped>
	.LiftBox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: url(../../../assets/EleSta/liftTBg.png) no-repeat 0 0;
		background-size: cover;
		flex-direction: column;
		padding: 5px;
		box-sizing: border-box;
		position: relative;
		.top {
			width: 100%;
			height: 10%;
			position: relative;

			.tixing {
				width: 250px;
				height: 105%;
				background: url(../../../assets/EleSta/liftBgHeader.png) no-repeat 0 0;
				background-size: cover;
				position: absolute;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
			}
		}

		.bottom {
			width: 100%;
			height: 88%;
			margin-top: 2%;
			display: flex;
			flex-direction: row;

			.leftBox,
			.rightBox {
				width: 20%;
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 5px;
				box-sizing: border-box;
			}

			.leftBox {


				.box-item {
					width: 100%;
					height: 20%;
					box-shadow: 0px 0px 5px #094eea inset;
					border-radius: 5px;
					margin-bottom: 5px;
					padding: 10px;
					box-sizing: border-box;

					.boxTit {
						color: #fff;
						text-indent: 0.5rem;
						text-align: left;
						margin-top: 5px;
						margin-bottom: 5px;
					}

					.boxContent {
						display: flex;
						flex-direction: row;
						font-size: 12px;
						color: #FFFFFF;
						height: 62%;

						// margin-top: 5%;
						.itemMess {
							width: 33.3%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;

							span {
								width: 100%;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}

			.rightBox {
				.rightItem {
					width: 100%;
					height: 10%;
					box-shadow: 0px 0px 5px #094eea inset;
					border-radius: 5px;
					margin-bottom: 5px;
					padding: 10px;
					box-sizing: border-box;
					align-items: center;
					display: flex;
				}

				.rightBoxItem {
					width: 100%;
					height: 45%;
					box-shadow: 0px 0px 5px #094eea inset;
					border-radius: 5px;
					margin-bottom: 5px;
					padding: 10px;
					box-sizing: border-box;
					flex-direction: column;
					display: flex;

					.boxTit {
						color: #fff;
						text-indent: 0.5rem;
						text-align: left;
						margin-top: 5px;
						margin-bottom: 5px;
					}

					.lastItem {
						font-size: 14px;
						margin: 10px 0;

						div {
							text-indent: 0.3rem;
							text-align: left;
						}
					}

					.imgBox {
						height: 80%;
						width: 100%;

						img {
							width: 48%;
							height: 48%;
							margin: 1%;
							border-radius: 3px;
						}
					}
				}
			}

			.centerBox {
				width: 60%;
				padding: 10px;
				box-sizing: border-box;
				height: 100%;
				background: rgba(14, 31, 59, 1);
				border-radius: 5px;
				box-shadow: 0px 0px 5px #094eea inset;

				.amap-wrapper {
					width: 100%;
					height: 94%;
					margin-top: 1%;
				}

				.header {
					width: 100%;
					height: 5%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}
			}
		}
	}

	.color00F0FF {
		color: #00F0FF;
	}

	.colorFF002A {
		color: #FF002A;
	}

	.speItem {
		height: 50% !important;
	}

	.line {
		margin: 5px 0;
		width: 100%;
		height: 1px;
		background: rgba(17, 109, 163, 1);
	}

	.input {
		width: 75%;
		margin-right: 10px;
	}

	.searchImg {
		width: 20px !important;
		height: 20px !important;
	}

	.colorFF {
		color: #fff;
		text-indent: 0.7rem !important;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.overflow {
		overflow-y: auto;
	}
	.currentDay{
		position: absolute;
		top: 10px;
		right: 30px;
		color: #fff;
		span{
			color: #5d9cec;
		}
	}
</style>
